<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>聊天室Demo</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    #share {
      height: 20px;
    }

    #videos {
      position: absolute;
      left: 30%;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
    }

    #videos video {
      display: inline-block;
      width: 32%;
    }

    #chat {
      position: absolute;
      left: 0;
      top: 20px;
      bottom: 0;
      width: 30%;
      border: 1px solid #0f0f0f;
    }

    #chat .msgIpt,
    #chat .fileIpt {
      position: absolute;
      left: 0;
      width: 80%;
    }

    #chat .sendBtn,
    #chat .sendFileBtn {
      position: absolute;
      left: 80%;
      width: 20%;
    }

    #chat .msgIpt,
    #chat .sendBtn {
      bottom: 0;
    }

    #chat .fileIpt,
    #chat .sendFileBtn {
      bottom: 30px;
    }

    #chat .msgs {
      padding: 5%;
    }

    #chat .msgs p {
      margin: 0.3em 0;
    }

    #files {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20%;
    }

    #files .name {}

    #files .percent {
      font-weight: bold;
      text-decoration: none
    }
  </style>
  <script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
</head>

<body>
  <div id="share">
    <button id="shareScreenBtn">共享屏幕</button>
    <button id="mozShareEnable">firefoxSupport</button>
    <a href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk">chromeSupport</a>
  </div>
  <div id="chat">
    <div class="msgs" id="msgs"></div>
    <input type="file" id="fileIpt" class="fileIpt">
    <button id="sendFileBtn" class="sendFileBtn">发送文件</button>
    <input type="text" id="msgIpt" class="msgIpt">

    <button id="sendBtn" class="sendBtn">发送</button>
  </div>
  <div id="videos">
    <video id="me" autoplay muted></video>
  </div>
  <div id="files">
  </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="/SkyRTC-client.js"></script>
<script type="text/javascript">
  var videos = document.getElementById("videos");
  var sendBtn = document.getElementById("sendBtn");
  var msgs = document.getElementById("msgs");
  var sendFileBtn = document.getElementById("sendFileBtn");
  var files = document.getElementById("files");
  var shareScreenBtn = document.getElementById("shareScreenBtn");
  var mozShareEnable = document.getElementById("mozShareEnable");
  var rtc = SkyRTC();

  /**********************************************************/
  // request addon to enable screen capturing for your domains
  window.postMessage({
    enableScreenCapturing: true,
    domains: ["115.28.101.55", "115.28.101.55:3000"]
  }, "*");

  // watch addon's response
  // addon will return "enabledScreenCapturing=true" for success
  // else "enabledScreenCapturing=false" for failure (i.e. user rejection)
  window.addEventListener("message", function(event) {
    var addonMessage = event.data;
    if (!addonMessage || typeof addonMessage.enabledScreenCapturing === 'undefined') return;

    if (addonMessage.enabledScreenCapturing === true) {
      // addonMessage.domains === [array-of-your-domains]
      alert(JSON.stringify(addonMessage.domains) + ' are enabled for screen capturing.');
    } else {
      // reason === 'user-rejected'
      alert(addonMessage.reason);
    }
  }, false);

  sendBtn.onclick = function(event) {
    var msgIpt = document.getElementById("msgIpt"),
      msg = msgIpt.value,
      p = document.createElement("p");
    p.innerText = "me: " + msg;
    p.textContent = "me: " + msg;
    //广播消息
    rtc.broadcast(msg);
    msgIpt.value = "";
    msgs.appendChild(p);
  };

  sendFileBtn.onclick = function(event) {
    //分享文件
    rtc.shareFile("fileIpt");
  };

  shareScreenBtn.onclick = function(event) {
    rtc.createShareStream({});
  };

  mozShareEnable.onclick = function(event) {
      InstallTrigger.install({
        'Foo': {
          // URL: 'https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/',
          URL: 'https://addons.mozilla.org/firefox/downloads/file/355418/enable_screen_capturing_in_firefox-1.0.006-fx.xpi?src=cb-dl-hotness',
          toString: function() {
            return this.URL;
          }
        }
      });
    }
    /**********************************************************/
  //创建本地视频流成功
  rtc.on("stream_created", function(stream) {
    document.getElementById('me').src = URL.createObjectURL(stream);
    document.getElementById('me').play();
  });
  //接收到其他用户的视频流
  rtc.on('pc_add_stream', function(stream, socketId) {
    var newVideo = document.createElement("video"),
      id = "other-" + socketId;
    newVideo.setAttribute("class", "other");
    newVideo.setAttribute("autoplay", "autoplay");
    newVideo.setAttribute("id", id);
    videos.appendChild(newVideo);
    rtc.attachStream(stream, id);
  });
  //删除其他用户
  rtc.on('remove_peer', function(socketId) {
    var video = document.getElementById('other-' + socketId);
    if (video) {
      video.parentNode.removeChild(video);
    }
  });
  //接收到文字信息
  rtc.on('data_channel_message', function(channel, socketId, message) {
    if (message.indexOf('/') == 0) {
      if (message === "/desktop_share") {
        //	rtc.remove_peer(socketId);
        sleep(5000);
        //	rtc.new_peer(socketId);
        location.reload(true);
      }
      return;
    }
    var p = document.createElement("p");
    p.innerText = socketId + ": " + message;
    p.textContent = socketId + ": " + message;
    msgs.appendChild(p);
  });
  //连接WebSocket服务器
  rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('#')[0], window.location.hash.slice(1));

  function sleep(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
      now = new Date();
      if (now.getTime() > exitTime)
        return;
    }
  }
</script>

</html>
